<template>
  <div>

    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>薪酬管理</el-breadcrumb-item>
      <el-breadcrumb-item>薪酬课程</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入员工名" clearable v-model="name" @clear="searchSalary">
            <el-button slot="append" icon="el-icon-search" @click="searchSalary"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible=true">添加薪水</el-button>
        </el-col>
      </el-row>


      <el-table :data="salaryList" border stripe >
        <el-table-column label="员工工号" prop="empCode"></el-table-column>
        <el-table-column label="员工姓名" prop="uname"></el-table-column>
        <el-table-column label="薪资月份" prop="salaryMonth"></el-table-column>
        <el-table-column label="基本工资" prop="uBasicSalary"></el-table-column>
        <el-table-column label="全勤奖" prop="perfectAttendance"></el-table-column>
        <el-table-column label="奖惩" prop="bonus"></el-table-column>
        <el-table-column label="加班费" prop="overtimePay"></el-table-column>
        <el-table-column label="请假" prop="leavePay"></el-table-column>
        <el-table-column label="出差" prop="evectionPay"></el-table-column>
        <el-table-column label="补助" prop="subsidies"></el-table-column>
        <af-table-column label="合计应发金额" prop="sendAmount"></af-table-column>
        <el-table-column label="养老保险" prop="endowmentInsurance"></el-table-column>
        <el-table-column label="医疗保险" prop="medicalInsurance"></el-table-column>
        <el-table-column label="失业险" prop="unemploymentInsurance"></el-table-column>
        <el-table-column label="公积金" prop="accumulationFund"></el-table-column>
        <el-table-column label="个税" prop="incomeTax"></el-table-column>
        <af-table-column label="实际应发金额" prop="netAmount"></af-table-column>
        <el-table-column label="操作" fixed="right" width="100px">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="removeById(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[2, 4 , 8, 16]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      ></el-pagination>
    </el-card>


    <!--添加-->
    <el-dialog title="添加薪水" :visible.sync="addDialogVisible" width="50%">
      <el-form
          :model="addForm"
          :rules="addFormRules"
          ref="addFormRef"
          label-width="100px"
          class="demo-ruleForm"
      >
        <el-form-item label="部门" prop="addDeptId">
          <el-select v-model="addDeptId" placeholder="部门" @change="initPosition">
            <el-option :label="d.dname" :value="d.id" v-for="d in deptList" :key="d.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职位" prop="addPositionId">
          <el-select v-model="addPositionId" placeholder="职位" @change="initEmployee">
            <el-option :label="item.pname" :value="item.id" v-for="item in jobList" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="员工" prop="addEmployeeId">
          <el-select v-model="addEmployee" placeholder="员工姓名">
            <el-option :label="item.empName" :value="item" v-for="item in empList" :key="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="月份" prop="addEmployeeId">
          <el-date-picker
              v-model="salaryMonth"
              value-format="yyyy-MM"
              type="month"
              placeholder="选择月">
          </el-date-picker>
        </el-form-item>


      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addSalary">确 定</el-button>
                <el-button @click="canceladd">取 消</el-button>
            </span>
    </el-dialog>

    <!--修改-->
    <el-dialog
        title="修改课程"
        :visible.sync="editDialogVisible"
        width="50%"
        @close="editFormClose"
        :close-on-click-modal="false"
        ref="editFormRef"
    >
      <el-form
          :model="editForm"
          :rules="editFormRules"
          ref="editFormRef"
          label-width="100px"
          class="demo-ruleForm"
      >
        <el-form-item label="课程名称" prop="name">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="课程类别" prop="category">
          <el-input v-model="editForm.category"></el-input>
        </el-form-item>
        <el-form-item label="培训课时" prop="courseHours">
          <el-input v-model="editForm.courseHours"></el-input>
        </el-form-item>
        <el-form-item label="培训方法" prop="trainingMethod">
          <el-input v-model="editForm.trainingMethod"></el-input>
        </el-form-item>
        <el-form-item label="考核方式" prop="assessmentMethod">
          <el-input v-model="editForm.assessmentMethod"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editCourse">确 定</el-button>
                <el-button @click="cancelEdit">取 消</el-button>
            </span>
    </el-dialog>


  </div>
</template>

<script>
export default {
  name: "Salary",
  data() {
    return {
      editFormRules: {},
      editForm: {
        id: '',
        name: '',
        category: '',
        courseHours: '',
        trainingMethod: '',
        assessmentMethod: '',

      },
      addDeptId: "",
      addPositionId: "",
      addEmployee: "",
      salaryMonth:"",
      empList: "",
      jobList: [],
      deptList: [],
      addForm: {
        id: '',
        name: '',
        category: '',
        courseHours: '',
        trainingMethod: '',
        assessmentMethod: '',

      },
      addFormRules: {},

      addDialogVisible: false,
      editDialogVisible: false,

      pageNum: 1,
      pageSize: 2,
      name: "",
      salaryList: [],
      total: 0,
    }
  },
  methods: {
    //取消添加
    canceladd() {
      this.addForm = {};
      this.addDialogVisible = false;
    },
    //添加
    addSalary() {
      this.$refs.addFormRef.validate(valid => {
        if (valid) {
          console.log(this.salaryMonth)
          let url = this.$HRMSUrl + "salary/add";
          this.$axios.post(url,{
            eId:this.addEmployee.id,
            salaryMonth:this.salaryMonth
          })
              .then(res => {
                if (res.data.code == 200) {
                  this.addDialogVisible = false;
                  this.addForm = {};
                  this.getSalaryList();
                } else {
                  this.$message({
                    type: "error",
                    message: res.data.msg,
                    duration: 1000
                  })
                }
              })
        } else {
          return false;
        }
      })

    },



    //删除
    removeById(id) {
      let url = this.$HRMSUrl + "salary/del/" + id;
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete(url)
            .then(res => {
              if (res.data.code === 200) {
                this.getSalaryList();
              } else {
                this.$message({
                  type: "error",
                  message: res.data.msg,
                  duration: 1000
                })
              }
            })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },

    //初始化数据
    getSalaryList() {
      let url = this.$HRMSUrl + "salary/list";
      this.$axios.get(url, {
        params: {
          name: this.name,
          currentPage: this.pageNum,
          pageSize: this.pageSize
        }
      }).then(res => {
        console.log(res)
        if (res.data.code === 200) {
          this.salaryList = res.data.data.list;
          this.pageNum = res.data.data.pageNum;
          this.pageSize = res.data.data.pageSize;
          this.total = res.data.data.total;
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      })
    },
    searchSalary() {
      this.getSalaryList();
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.getCourseList();
    },
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.getCourseList();
    },
    initDept() {
      let url = this.$HRMSUrl + "dept/listAllDept";
      this.$axios.get(url).then(res => {
        if (res.data.code === 200) {
          console.log(res)
          this.deptList = res.data.data.list;
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      })
    },
    initPosition() {
      let url = this.$HRMSUrl + "position/initPositionByDept/" + this.addDeptId;
      this.$axios.get(url).then(res => {
        if (res.data.code === 200) {
          console.log(res)
          this.jobList = res.data.data;
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      })
    },
    initEmployee() {
      let url = this.$HRMSUrl + "employee/listEmpByCondition";
      this.$axios.get(url, {
        params: {
          deptId: this.addDeptId,
          positionId: this.addPositionId
        }
      }).then(res => {

        if (res.data.code === 200) {
          this.empList = res.data.data;
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      })
    },
  },
  created() {
    this.searchSalary()
    this.initDept()
  }
}
</script>

<style scoped>

</style>